<!--
 * @Author: 刘谕函1 11609278+liu-yuhan-1@user.noreply.gitee.com
 * @Date: 2021-11-18 23:21:54
 * @LastEditors: 刘谕函1 11609278+liu-yuhan-1@user.noreply.gitee.com
 * @LastEditTime: 2023-01-07 13:45:30
 * @FilePath: \寒假作业\vue-admin-template-master\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <div class="dashbored_div1">
    <!-- 头部 -->
    <el-card class="haeader">
      <div class="head_data">
        <div class="head_imag">
          <img  :src="userInfo.staffPhoto" v-imageerror="defaultImg">
        </div>
        <div class="head_wen">
          <p class="head_aa">早安，{{userInfo.username}}，祝你开心每一天！</p>
          <p class="lastChild">{{ userInfo.username }}   |  {{ userInfo.companyName }}-{{ userInfo.departmentName }}</p>
        </div>
      </div>
    </el-card>

    <el-row type="flex" justify="space-between">
      <el-col :span="13" style="padding-right: 26px">
        <!-- 日历 -->
        <el-card class="box-rili">
          <div class="head_tou">
            <span>工作日历</span>
          </div>
          <hr />
          <!-- 放日历 --> 
          <work/>
 
          </el-card
        ><br /><br /><br />
        <!-- 公告 -->
        <el-card class="box-card">
          <div class="wen">
            <div class="zi">公告</div>
            <div class="box_dahe">
              <ul class="noticeList">
                <li>
                  <div class="box_item">
                    <img
                      src="@/assets/common/img.jpeg"
                      alt=""
                      class="box_tupian"
                    />
                    <div>
                      <p class="box_gong">
                        <span class="box_renyuan">朱继柳</span> 发布了
                        第1期“传智大讲堂”互动讨论获奖名单公布
                      </p>
                      <p>2018-07-21 15:21:38</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="11">
        <el-card class="box-card">
          <div class="header headTit">
            <span>流程申请</span>
          </div>
          <div class="box_liu">
            <el-button class="box_cheng">加班离职</el-button>
            <el-button class="box_cheng">请假调休</el-button>
            <el-button class="box_cheng">审批列表</el-button>
            <el-button class="box_cheng">我的信息</el-button>
          </div>
        </el-card>

        <!-- 绩效指数 -->
        <el-card class="box-card">
          <div slot="header" class="header">
            <span>绩效指数</span>
          </div>
        <!-- 放置雷达图 -->
        <Radar></Radar>
        </el-card>
        <!-- 帮助连接 -->
        <el-card class="box-card">
          <div class="header headTit">
            <span>帮助链接</span>
          </div>
          <div class="sideLink">
            <el-row>
              <el-col :span="8">
                <a href="#">
                  <span class="icon iconGuide" />
                  <p>入门指南</p>
                </a>
              </el-col>
              <el-col :span="8">
                <a href="#">
                  <span class="icon iconHelp" />
                  <p>在线帮助手册</p>
                </a>
              </el-col>
              <el-col :span="8">
                <a href="#">
                  <span class="icon iconTechnology" />
                  <p>联系技术支持</p>
                </a>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import  {createNamespacedHelpers} from 'vuex'
const {mapState} =createNamespacedHelpers('user')
import Radar from './components/radar'
import work from "./components/work.vue"


export default {
  name: "Com",
  data() {
    return {
      defaultImg:require('@/assets/common/head.jpg')
    };
  },

  components: {
    // work_calendar,
    work,
    Radar
  },

  computed: {
    ...mapState(['userInfo'])
  },

  mounted() {},

  methods: {},
  watch: {},
  mixins: [],
};
</script>
<style  scoped lang="scss">
.dashbored_div1 {
  margin: 10px;
  box-sizing: border-box;
}
.head_data {
  display: flex;
}
.head_imag {
  width: 100px;
  height: 100px;
}
.head_wen {
  margin-left: 40px;
  margin-top: 10px;
  .head_aa {
    font-size: 20px;
  }
}

.box-rili {
  padding: 5px 10px;
  margin-top: 20px;
}
.head_tou {
  font-size: 20px;
}
.wen {
  background-color: white;
  .zi {
    font-size: 15px;
    padding: 20px;
  }
}
.box_dahe {
  padding: 0 20px;
  min-height: 350px;
}
.box_item {
  display: flex;
  padding: 18px 0 10px;
  border-bottom: solid 1px gray;
}
.box_renyuan {
  color: rebeccapurple;
}
.box_tupian {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-right: 10px;
}
.box_gong {
  padding: 0 0 8px;
}
// 右侧内容
.header {
  span {
    color: black;
    font-size: 24px;
  }
  .headTit {
    span {
      border-bottom: 4px solid rebeccapurple;
      padding-bottom: 10px;
    }
  }
}
.noticeList {
  margin: 0;
  padding: 0;
}
.box_liu,
.sideLink {
  padding: 30px 0 12px;
  .sideBtn {
    padding: 16px 26px;
    font-size: 16px;
    margin: 10px 5px;
  }
}
.box_cheng {
  padding: 16px 26px;
  font-size: 16px;
  margin: 10px 5px;
}
.box-card {
  padding: 5px 10px;
  margin-top: 20px;
}


.iconHelp {
    background-position: -224px 0;
  }
  .iconGuide {
    background-position: 0 0;
  }
  .iconTechnology {
    background-position: -460px 0;
  }
 .sideLink{
  text-align: center;
  .icon {
    display: inline-block;
    width: 76px;
    height: 76px;
    background: url('./../../assets/common/icon.png') no-repeat;
  }
 }
  
</style>